<template>
    <a-spin v-if="state.loading" />
    <a-tree v-else checkable :disabled="disabled" :tree-data="state.treeData" @check="handleSelect" :defaultExpandAll="false"
        defaultExpandParent :fieldNames="state.fieldNames" :checkedKeys="showRoutes" />
</template>
<script setup lang="ts">
import {computed,onMounted} from 'vue'
import { deepClone } from '@/utils/index'
import { remoteList } from '@/api/system/menu'
//自定义传入内容
const props = defineProps({
    routes: {
        type: Array,
        default: () => []
    },
    disabled: {
        type: Boolean,
        default: false
    }
});
const emit = defineEmits(['change'])
//基础信息
const state = reactive({
    loading: false,
    treeData: [],
    fieldNames: {
        children: 'children',
        title: 'name',
        key: 'path'
    }
});
//计算显示routes
let showRoutes = computed(() => {
    let menus = deepClone(props.routes)
    if (!menus.length) {
       return []
    };
    return dealRoutes(menus)
});
//选择routes
const handleSelect = (selectedKeys: string | any[], info: { halfCheckedKeys: any; }) => {
    let allKeys = selectedKeys.concat(info.halfCheckedKeys);
    emit('change', allKeys);
}
//处理父层级 选中 子层级为全选
const dealRoutes = (routeData: any) => {
    if (!state.treeData.length) return [];
    let routes = deepClone(routeData);
    dealMenuChecked(state.treeData, routes)
    let res = dealChecked(state.treeData, routes)
    return res
}
const dealMenuChecked = (treeData: any[], routes: string | any[]) => {
    if (treeData?.length) {
        treeData.map((item: { childNum: number; children: any[]; path: any; }) => {
            item.childNum = 0;
            if (item.children?.length) {
                item.children.map((child: { path: any; }) => {
                    if (routes.indexOf(child.path) != -1) {
                        item.childNum += 1
                    }
                })
                item.children = dealMenuChecked(item.children, routes)
            } else {
                if (routes.indexOf(item.path) != -1) {
                    item.childNum += 1
                }
            }
        })
    }
    return treeData;
}
const dealChecked = (treeData: any[], menus: any) => {
    let menusArray = deepClone(menus);
    if (treeData?.length) {
        treeData.map((item: { children: any[]; childNum: number; path: any; }) => {
            if (item.children?.length) {
                if (item.childNum != 0 && item.childNum < item.children.length) {
                    menusArray = menusArray.filter((route: any) => route != item.path)
                    menusArray = dealChecked(item.children, menusArray)
                }
            }
        })
    }
    return menusArray
}

onMounted(()=>{
    getMenus();
})
//获取菜单列表
const getMenus = async () => {
    try {
        state.loading = true;
        let res = await remoteList({ page: 0, size: 0 });
        let { data } = res;
        state.treeData = data;
    } finally {
        state.loading = false;
    }
}
</script>